<template>
  <el-container class="index-container">
    <el-header>
      <el-row>
        <el-col :span="11">&nbsp;</el-col>
        <el-col :span="11">&nbsp;</el-col>
        <el-col :span="2">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              admin<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="personSet">个人设置</el-dropdown-item>
              <el-dropdown-item command="out">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <!--左边菜单区域-->
      <el-aside width="isCollapse ? 64px : 200px">
        <!--收缩和折叠-->
        <div class="changeState" @click="isCollapse=!isCollapse">
          <i v-if="isCollapse" class="el-icon-arrow-left"></i>
          <i v-else class="el-icon-arrow-right"></i>
        </div>
        <el-menu class="el-menu-vertical-demo index-menu"
                 :collapse="isCollapse"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 default-active="home"
                 :unique-opened="uniqueOpened"
                 :router="isRouter">
          <NavMenu  :navMenus="menuList"></NavMenu>
        </el-menu>
      </el-aside>
      <!--内容区域-->
      <el-main>
        <!--子路由区域-->
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'

export default {
  name: 'layout',
  components: { NavMenu },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      isCollapse: false,
      uniqueOpened: true,
      isRouter: true,
      menuList: []
    }
  },
  created () {
    this.setMenu()
  },
  methods: {
    // 设置菜单
    setMenu () {
      this.postRequest('/getMenu', 'type=top&key=123456').then(res => {
        let menlist = res.data.menList.map(function (list, index) {
          let routerUrl = list.url.substring(list.url.lastIndexOf('/') + 1)
          list.routerUrl = routerUrl
          return list
        })
        let routers = []
        for (let i = 0; i < menlist.length; i++) {
          let list = menlist[i]
          let name = list.url.substring(list.url.lastIndexOf('/') + 1)
          routers.push({
            name: name,
            path: '/' + name,
            url: list.url,
            component: (resolve) => require(['@/' + list.url + '.vue'], resolve)
          })
        }
        this.$router.options.routes[0].children = routers
        this.$router.addRoutes(this.$router.options.routes)
        // 缓存路由到stroe
        this.$store.commit('setMenList', routers)
        this.menuList = this.Pub.formatter(menlist)
        // 初始化成功后跳转路由到首页去
        this.$router.push({
          path: '/home'
        })
      })
    },
    handleCommand (command) {
      // 注销登录
      if (command === 'out') {
        this.postRequest('/loginOut', {})
          .then(res => {
            let oData = res.data
            if (oData.success) {
              // 清楚sotre中和本地存储中的数据
              this.$store.commit('clearToken')
              this.$router.push({path: '/login'})
            } else {
              this.$message.error(oData.data.msg)
            }
          })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .el-header {
    background-color: #42c5d1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    background-color: #545c64;
    color: #333;
    text-align: left;
  }
  .index-menu{
    border-right: none;
  }
  .changeState{
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    color: white;
    border-bottom: 1px solid gray;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .index-container {
    height: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
  .el-dropdown-link {
    cursor: pointer;
  }
</style>
